<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@page import="com.sentiment.config.Config" %>

<%String cp = Config.projectRootPath; %>
    <!DOCTYPE html>
        <html>
        <!--
        ===
        This comment should NOT be removed.

        Charisma v2.0.0

        Copyright 2012-2014 Muhammad Usman
        Licensed under the Apache License v2.0
        http://www.apache.org/licenses/LICENSE-2.0

        http://usman.it
        http://twitter.com/halalit_usman
        ===
        -->
        <meta charset="utf-8">
        <title>管理员界面</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">
        <meta name="author" content="Muhammad Usman">

        <!-- The styles -->
        <link id="bs-css" href="css/bootstrap-cerulean.min.css" rel="stylesheet">

        <link href="css/charisma-app.css" rel="stylesheet">
        <link href='bower_components/fullcalendar/dist/fullcalendar.css' rel='stylesheet'>
        <link href='bower_components/fullcalendar/dist/fullcalendar.print.css' rel='stylesheet' media='print'>
        <link href='bower_components/chosen/chosen.min.css' rel='stylesheet'>
        <link href='bower_components/colorbox/example3/colorbox.css' rel='stylesheet'>
        <link href='bower_components/responsive-tables/responsive-tables.css' rel='stylesheet'>
        <link href='bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css' rel='stylesheet'>
        <link href='css/jquery.noty.css' rel='stylesheet'>
        <link href='css/noty_theme_default.css' rel='stylesheet'>
        <link href='css/elfinder.min.css' rel='stylesheet'>
        <link href='css/elfinder.theme.css' rel='stylesheet'>
        <link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
        <link href='css/uploadify.css' rel='stylesheet'>
        <link href='css/animate.min.css' rel='stylesheet'>
        <link href='css/mycss.css' rel='stylesheet'>
        <link href="${pageContext.request.contextPath }/WebPage/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

        <!-- jQuery -->
        <script src="bower_components/jquery/jquery.min.js"></script>
		<script src="js/pageMaker.js"></script>
		<script src="js/userPaymentRecord.js"></script>
		<script src="${pageContext.request.contextPath }/WebManagement/js/jquery.blockUI.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/WebPage/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/WebPage/js/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
        <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <!-- The fav icon -->
        <link rel="shortcut icon" href="img/favicon.ico">

       <!--      “增加”按钮
            <script>
                function    locking(){
                    document.all.ly.style.display="block";
                    document.all.ly.style.width=document.body.clientWidth;
                    document.all.ly.style.height=document.body.clientHeight;
                    document.all.Layer2.style.display='block';
                }
                function    Lock_CheckForm(theForm){
                    document.all.ly.style.display='none';document.all.Layer2.style.display='none';
                    return   false;
                }
            </script> -->

        </head>
        <body>
        <!-- topbar starts -->
        <jsp:include page="topbar.jsp"></jsp:include>
        <!-- <div class="navbar navbar-default" role="navigation">

        <div class="navbar-inner">
        <button type="button" class="navbar-toggle pull-left animated flip">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.jsp">
        <span>后台用户管理界面</span></a>
        <ul class="collapse navbar-collapse nav navbar-nav top-menu">
        <li><a href="#"><i class="glyphicon glyphicon-globe"></i> Visit Site</a></li>
        </ul>
        </div>
        </div> -->

        <!-- topbar ends -->

        <div class="ch-container">
        <div class="row">

        <!-- left menu starts -->
        <jsp:include page="leftmenu.jsp"></jsp:include>
        <!-- <div class="col-sm-2 col-lg-2">
        <div class="sidebar-nav">
        <div class="nav-canvas">
        <div class="nav-sm nav nav-stacked">

        </div>
        <ul class="nav nav-pills nav-stacked main-menu">
        <li class="nav-header">操作</li>
        <li><a class="ajax-link" href="index.jsp"><i class="glyphicon glyphicon-home"></i><span> 首页</span></a>
        </li>
        <li class="accordion">
        <a href="#"><i class="glyphicon glyphicon-list-alt"></i><span> 列表信息</span></a>
        <ul class="nav nav-pills nav-stacked">
        <li><a href="userlist.jsp">用户列表</a></li>
        <li><a href="rolelist.jsp">角色列表</a></li>
        <li><a href="permissionlist.jsp">权限列表</a></li>
        </ul>
        </li>
        <li class="accordion"><a href="#"><i class="glyphicon glyphicon-edit"></i><span> 报告发布</span></a><ul class="nav nav-pills nav-stacked"><li><a href="dailypublish.jsp">每日报告</a></li><li><a href="hotpublish.jsp">热点报告</a></li></ul></li>
        <li class="accordion">
        <a href="#"><i class="glyphicon glyphicon-file"></i><span> 历史信息管理</span></a>
        <ul class="nav nav-pills nav-stacked">
        <li><a href="historyrecorddaily.jsp">每日舆情</a></li>
        <li><a href="historyrecordhot.jsp">热点舆情</a></li>
        </ul>
        </li>
        <li>
        <a href="userPaymentsRecord.jsp"><i class="glyphicon glyphicon-shopping-cart"></i><span>用户收费信息管理</span></a>
        </li>

        <li class="accordion">
        <a href="#"><i class="glyphicon glyphicon-list-alt"></i><span> 系统通知</span></a>
        <ul class="nav nav-pills nav-stacked">
        <li><a href="systemrefer.jsp">查询</a></li>
        <li><a href="systemedit.jsp">编辑</a></li>
        </ul>
        </li>

        <li class="nav-header hidden-md">其它</li>
        <li><a class="ajax-link" href="user.jsp"><i
        class="glyphicon glyphicon-user"></i><span> 用户信息</span></a></li>
        </ul>
        </div>
        </div>
        </div> -->
        <!--/span-->
        <!-- left menu ends -->

        <noscript>
        <div class="alert alert-block col-md-12">
        <h4 class="alert-heading">Warning!</h4>

        <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>
        enabled to use this site.</p>
        </div>
        </noscript>

        <div id="content" class="col-lg-10 col-sm-10">
        <!-- content starts -->
        <div>
        <ul class="breadcrumb">
        <li>
        <a href="${pageContext.request.contextPath }/WebManagement/index.jsp">主页</a>
        </li>
        <li>
        <a href="#">用户收费信息管理</a>
        </li>

        </ul>
        </div>
        
    <div class="row">
    <div class="box col-md-12">
    <div class="box-inner">
    <div class="box-header well" data-original-title="">
        <h2><i class="glyphicon glyphicon-list-alt"></i> 用户列表</h2>
        <button id="add" class="moveright">增加</button>
    </div>
    <div class="box-content">
     <label>用户名：</label><input id="username_serch" class="searchipt" >
     <label>收费总额：</label><input id="payment_serch" class="searchipt" >
     <label>收费项：</label> <input id="item_serch" class="searchipt" >
     <label>操作员：</label> <input id="operator_serch" class="searchipt" >
     <br>
    <div class="col-md-4 searchipt" style="margin-left:-14px; margin-top:10px">
    <div class="input-group date form_date" id="paydatepicker" data-date="" data-date-format="dd-mm-yyyy">
    <label>收费时间：</label><input id="paydatevalue_serch" size="18" type="text" readonly>
    <span class="input-group-addon" style="margin-left:20px"><i class="glyphicon glyphicon-remove"></i></span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>  
    </div>
    
    <div class="col-md-4 searchipt" style="margin-left:-20px; margin-top:10px">
    <div class="input-group date form_date" id="startdatepicker" data-date="" data-date-format="dd-mm-yyyy">
    <label>开始时间：</label><input id="startdatevalue_serch" size="18" type="text" readonly>
    <span class="input-group-addon" ><i class="glyphicon glyphicon-remove"></i></span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>  
    </div>
    
    <div class="col-md-4 searchipt" style="margin-left:-14px; margin-top:10px; margin-bottom:10px">
    <div class="input-group date form_date" id="enddatepicker" data-date="" data-date-format="dd-mm-yyyy">
    <label>结束时间：</label><input id="enddatevalue_serch" size="18" type="text" readonly>
    <span class="input-group-addon" style="margin-left:20px"><i class="glyphicon glyphicon-remove"></i></span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>  
    </div>
    
    <button id="searchbtn" style="margin-top:60px;margin-right:50px">查询</button>
     <br>
    
    <table id="chargeInfoTable" class="display table-striped table-bordered bootstrap-datatable" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>用户名</th>
        <th>收费总额</th>
        <th>收费时间</th>
        <th>有效期开始时间</th>
        <th>有效期结束时间</th>
        <th>收费项</th>
        <th>操作员</th>
    </tr>
    </thead>
    
    </table>
    <img id="loading" src="../WebPage/img/loading.gif"style="display:none">
    <!-- 查询无结果提示框 -->
    <div id="noresult" style="display:none">
    <div id="resultinfo" ></div>
    <button id="res_confirm">确定</button> 
    </div>
    <!-- 查询提示框结束 -->
     <!--翻页器  -->
    <div class="col-md-12 center-block">
    	<div id="pagetoolBar" class="dataTables_paginate paging_bootstrap pagination">
    	</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    
    
     <!--增加页面框  -->
    <div id="addframe" style="display:none">
    <div class="row">
    <div class="col-md-9">
		<label>用户名：</label><input name="username" type="text" placeholder="用户名" required="required" id="username">
		<div class="clear"> </div>
	</div>
	</div>
	<br>
	<div class="row">
	<div class="col-md-9">
		<label>收费总额（元）：</label><input id="payment" type="text" placeholder="收费总额" required="required" value="34.5" readonly="">
		<div class="clear"> </div>
	</div>
	</div>
	<br>
	<div class="row" style="margin-left:193px">
	<div class="col-md-6">
	<div class="input-group date form_date " id="paydate" data-date="" data-date-format="dd-mm-yyyy">
    <label>收费时间：</label><input id="paydatevalue" size="18" type="text" placeholder="收费时间" required="required" >
    <span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>  
    </div>
	</div>
	<br>
	<div class="row" style="margin-left:193px">
	<div class="col-md-6">
	<div class="input-group date form_date " id="startdate" data-date="" data-date-format="dd-mm-yyyy">
    <label>有效期开始时间：</label><input id="startdatevalue" size="18" type="text" placeholder="有效期开始时间" required="required" >
    <span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div> 
	</div>
	</div>
	<br>
	<div class="row" style="margin-left:193px">
	<div class="col-md-6">
	<div class="input-group date form_date" id="enddate" data-date="" data-date-format="dd-mm-yyyy">
    <label>有效期结束时间：</label><input id="enddatevalue" size="18" type="text" placeholder="有效期结束时间" required="required" >
    <span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div> 
	</div>
	</div>
	<br>
	<div class="row">
	<div class="col-md-9">
		<label>收费项：</label><input id="item" type="text" placeholder="付费用户" required="required" readonly>
		<div class="clear"> </div>
	</div>
	</div>
	<br>
	<div class="row">
	<div class="col-md-9">
		<label>操作员：</label><input id="operator" type="text" placeholder="<shiro:principal property="username"/>" required="required" readonly>
		<div class="clear"> </div>
	</div>
	</div>
	<br>
	<button id="confirm" type="submit" >确定</button>
	<button id="cancel" >取消</button>
   <!--  </form> -->
    </div>


        <!-- external javascript -->

        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

        <!-- library for cookie management -->
        <script src="js/jquery.cookie.js"></script>
        <!-- calender plugin -->
        <script src='bower_components/moment/min/moment.min.js'></script>
        <script src='bower_components/fullcalendar/dist/fullcalendar.min.js'></script>
        <!-- data table plugin -->
        <script src='js/jquery.dataTables.min.js'></script>

        <!-- select or dropdown enhancer -->
        <script src="bower_components/chosen/chosen.jquery.min.js"></script>
        <!-- plugin for gallery image view -->
        <script src="bower_components/colorbox/jquery.colorbox-min.js"></script>
        <!-- notification plugin -->
        <script src="js/jquery.noty.js"></script>
        <!-- library for making tables responsive -->
        <script src="bower_components/responsive-tables/responsive-tables.js"></script>
        <!-- tour plugin -->
        <script src="bower_components/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>
        <!-- star rating plugin -->
        <script src="js/jquery.raty.min.js"></script>
        <!-- for iOS style toggle switch -->
        <script src="js/jquery.iphone.toggle.js"></script>
        <!-- autogrowing textarea plugin -->
        <script src="js/jquery.autogrow-textarea.js"></script>
        <!-- multiple file upload plugin -->
        <script src="js/jquery.uploadify-3.1.min.js"></script>
        <!-- history.js for cross-browser state change on ajax -->
        <script src="js/jquery.history.js"></script>
        <!-- application script for Charisma demo -->
        <script src="js/charisma.js"></script>
       

        </body>
        </html>